<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <el-form ref="queryForm" :inline="true" :model="queryForm">
        <el-form-item label="仓库" prop="storageId">
          <el-select
            v-model="queryForm.storageId"
            placeholder="请选择仓库"
            @change="selectStorage()"
          >
            <el-option label="全部" :value="-1" />
            <el-option
              v-for="item in storageIdOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-select v-model="queryForm.storageAreaId" placeholder="请选择库区">
            <el-option label="全部" :value="-1" />
            <el-option
              v-for="item in storageAreaOptions"
              :key="item.id"
              :label="item.areaName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="物料" prop="material">
          <el-input
            v-model="queryForm.material"
            placeholder="请输入物料编号或名称"
          />
        </el-form-item>
        <el-form-item label="规格型号" prop="size">
          <el-input v-model="queryForm.size" placeholder="请输入规格型号" />
        </el-form-item>
        <el-form-item label="分类" prop="typeId">
          <BaseTreeSelect
            v-model="queryForm.typeId"
            :tree-data="categoryTree"
            placeholder="请选择分类"
            clearable
            @node-click="handleNodeClick"
          />
        </el-form-item>
        <el-form-item prop="actualCountState">
          <el-checkbox v-model="queryForm.actualCountState"
            >忽略实际库存为0</el-checkbox
          ></el-form-item
        >
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button @click="cancelForm">清空</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="list"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="仓库">
          <template slot-scope="scope">
            {{ scope.row.storageName }}
          </template>
        </el-table-column>
        <el-table-column label="库区">
          <template slot-scope="scope">
            {{ scope.row.storageAreaName }}
          </template>
        </el-table-column>
        <el-table-column label="物料编号">
          <template slot-scope="scope">
            {{ scope.row.productNum }}
          </template>
        </el-table-column>
        <el-table-column label="物料名称">
          <template slot-scope="scope">
            {{ scope.row.productName }}
          </template>
        </el-table-column>
        <el-table-column label="别名" prop="aliasName" />
        <el-table-column label="分类" prop="categoryName" />
        <el-table-column label="规格型号" prop="size" />
        <el-table-column label="包装单位" prop="packingUnit" />
        <el-table-column label="实际库存" prop="surplusStock" />
      </el-table>
      <el-descriptions class="margin-top" :column="1" border>
        <el-descriptions-item>
          <template slot="label">
            <div>总实际库存:</div>
          </template>
          <div style="width: 300px">{{ totalInventoryCount }}</div>
        </el-descriptions-item>
      </el-descriptions>
      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>

    <MaterialInventoryEdit
      ref="MaterialInventoryEdit"
      :dialog-form-visible.sync="dialogFormVisible"
    />
  </div>
</template>

<script>
import { getStorageList, getStorageAreaList, getTreeData } from "../../../api/Material/Common.js";
import { getInventoryList } from "../../../api/Material/MaterialProductBatch.js";
import MaterialInventoryEdit from "./MaterialInventoryEdit.vue";
import { formatData } from "../../../utils/index"
export default {
  name: "MaterialInventoryList",
  components: { MaterialInventoryEdit },
  data() {
    return {
      storageIdOptions: [],
      storageAreaOptions: [],
      loading: true,
      list: [],
      categoryTree: [],
      appId: 4000,
      totalInventoryList: [],
      queryForm: {
        material: '',
        actualCountState: true,
        productId: 0,
        productName: "",
        productNum: "",
        storageId: -1,
        storageName: "",
        storageAreaId: -1,
        storageAreaName: "",
        storageSpaceId: 0,
        storageSpaceName: "",
        actualCount: 0,
        frozenCount: 0,
        availableCunt: 0,
        typeId: 0,
      },
      dialogFormVisible: false,
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  computed: {
    totalInventoryCount() {
      return this.totalInventoryList.reduce((acc, curr) => acc + curr.surplusStock, 0)
    }
  },
  created() {
    this.getList();
    this.getStorageListFun();
    this.getOptions();
  },
  methods: {
    getOptions() {
      return new Promise((resolve) => {
        getTreeData({ AppId: this.appId, Status: 1 }).then((res) => {
          this.categoryTree = formatData(res.data);
          resolve();
        });
      })
    },
    handleNodeClick(data, node) {
      if (data.id !== null && data.id.length !== 0) {
        this.queryForm.classOneId = data.id;
      }
    },
    selectStorage() {
      this.queryForm.storageAreaId = null;
      this.queryForm.storageSpaceId = null;
      getStorageAreaList({
        storageId: this.queryForm.storageId,
        // status: 1,
        pageIndex: 1,
        pageSize: 50000,
      }).then((res) => {
        this.storageAreaOptions = res.data.dataList;
      });
    },

    getStorageListFun() {
      getStorageList()
        .then((res) => {
          this.storageIdOptions = res.data.dataList;
        })
        .catch((res) => { });
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.queryForm.storageAreaId = -1
      this.$refs.queryForm.resetFields();
      this.pagination.pageIndex = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      getInventoryList(this.queryForm, this.pagination).then((res) => {
        this.list = res.data.dataList ? res.data.dataList : [];
        this.pagination.total = res.data.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
      getInventoryList(this.queryForm, {
        pageIndex: 1,
        pageSize: 100000,
        total: 0,
      },).then((res) => {
        this.totalInventoryList = res.data.dataList ? res.data.dataList : [];
      }).catch(() => {

      });
    },
    onQuery() {
      this.pagination.pageIndex = 1;
      this.getList();
    },
  },
};
</script>
